<template>
  <view class="home">
    <swiper indicator-dots circular>
      <swiper-item v-for="item in swipers" :key="item.id">
        <image :src="item.img"></image>
      </swiper-item>
    </swiper>
    <!-- 导航区域 -->
    <view class="nav">
      <view class="nav_item" v-for="(item, index) in navs" :key="index" @click="navItemClick(item.path)">
        <view :class="item.icon"></view>
        <text>{{ item.title }}</text>
      </view>
    </view>
    <!-- 推荐商品 -->
    <view class="hot_goods">
      <view class="tit">推荐商品</view>
      <goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
    </view>
  </view>
</template>

<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
  data() {
    return {
      swipers: [],
      goods: [],
      navs: [
        {
          icon: 'iconfont icon-ziyuan',
          title: '黑马超市',
          path: '/pages/goods/goods'
        },
        {
          icon: 'iconfont icon-guanyuwomen',
          title: '联系我们',
          path: '/pages/contact/contact'
        },
        {
          icon: 'iconfont icon-tupian',
          title: '社区图片',
          path: '/pages/pics/pics'
        },
        {
          icon: 'iconfont icon-shipin',
          title: '学习视频',
          path: '/pages/videos/videos'
        }
      ]
    }
  },
  onLoad() {
    this.getSwipers()
    this.getHotGoods()
  },
  components: { "goods-list": goodsList },
  methods: {
    // 获取轮播图的数据
    async getSwipers() {
      const res = await this.$myRequest({
        url: '/api/getlunbo'
      })
      this.swipers = res.data.message
    },
    // 获取热门商品列表数据
    async getHotGoods() {
      const res = await this.$myRequest({
        url: '/api/getgoods?pageindex=1'
      })
      this.goods = res.data.message
    },
    // 导航点击的处理函数
    navItemClick(url) {
      uni.navigateTo({
        url
      })
    },
    // 导航到商品详情页
    goGoodsDetail(id) {
      uni.navigateTo({
        url: '/pages/goods-detail/goods-detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss">
  .home {
    swiper {
      width: 750rpx;
      height: 380rpx;
      image {
        height: 100%;
        width: 100%;
      }
    }
    .nav {
      display: flex;
      .nav_item {
        width: 25%;
        text-align: center;
        view {
          width: 120rpx;
          height: 120rpx;
          background: $shop-color;
          border-radius: 60rpx;
          margin: 10px auto;
          line-height: 120rpx;
          color: #fff;
          font-size: 50rpx;
        }
        .icon-tupian {
          font-size: 45rpx;
        }
        text {
          font-size: 30rpx;
        }
      }
    }
    .hot_goods {
      background: #eee;
      overflow: hidden;
      margin-top: 10px;
      .tit {
        height: 50px;
        line-height: 50px;
        color: $shop-color;
        text-align: center;
        letter-spacing: 20px;
        background: #fff;
        margin: 7rpx 0;
      }
    }
  }
</style>